import React, {Component, useRef, useState} from 'react';


export default function App() {

    const [list, setlist] = useState(['aa', 'bb', 'cc'])
    const mytext =useRef()//等同与React.createRef()

    const handleAdd = () => {
        console.log(mytext.current.value)
        setlist([...list,mytext.current.value])
        mytext.current.value=''
    }

    const handledel = (index) => {
        var newlist=[...list]
        newlist.splice(index,1)
        setlist(newlist)
    }
    return (
        <div>
            <input type="text" ref={mytext}/>
            <button onClick={handleAdd}>add</button>
            <ul>
                {
                    list.map((item,index) =>
                        <li key={index}>{item}
                            <button onClick={()=>{
                                handledel(index)
                            }}>delete</button>
                        </li>
                    )
                }
            </ul>
            {
                list.length==0 && <div>空!</div>
            }

        </div>
    )
}
